<template>
  <view class="more-wrapper" @click.stop="operateVisible = true">
    <view class="dot" />
    <view class="dot" />
    <view class="dot" />

    <!-- 操作框 -->
    <view
      class="mask"
      :style="{ height: options.length * 434 + 'rpx' }"
      @click.stop="operateVisible = false"
      v-show="operateVisible"
    />
    <view class="operate-box" v-show="operateVisible">
      <view class="arrow" />
      <template v-for="item in options">
        <view
          class="operate-item"
          :class="{ gray: item.disabled }"
          @click.stop="itemClick(item)"
          v-if="item.visible"
        >
          {{ item.label }}
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  // 操作栏选项:[{label:'xxx',visible:true,disabled:false,type:'xxx'}]
  options: Array,
});

// 是否显示操作栏
let operateVisible = ref(false);

const emits = defineEmits(["click"]);

// 点击操作项
function itemClick(item) {
  if (!item.disabled) {
    emits("click", item);
  }
}
</script>

<style lang="scss" scoped>
.more-wrapper {
  position: relative;
  width: 45rpx;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .dot {
    width: 10rpx;
    height: 10rpx;
    background: #999999;
    border-radius: 50%;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
  }

  .operate-box {
    position: absolute;
    top: -28rpx;
    right: 76rpx;
    z-index: 99;
    background: #ffffff;
    box-sizing: border-box;
    border: 2rpx solid #dddddd;
    box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    padding: 0 30rpx;

    .arrow {
      position: absolute;
      top: 24rpx;
      right: -20rpx;
      width: 20rpx;
      height: 29rpx;
      background: url("https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-layer-arrow.png");
      background-size: 100%;
    }

    .operate-item {
      width: 265rpx;
      height: 80rpx;
      font-size: 26rpx;
      color: #333333;
      font-weight: 400;
      border-bottom: 2rpx solid #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;

      &:last-child {
        border-bottom: 0;
      }

      &.gray {
        color: #999999;
      }
    }
  }
}
</style>
